<!-- eslint-disable no-console -->
<script lang="ts" setup>
import type { DictApi } from '#/api';
import type { unitmeasureAPI } from '#/api/mes/md/unitmeasure';

import { reactive, ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import { useVbenForm } from '#/adapter/form';
import { DictResp } from '#/api';
import { addUnit, updateUnit } from '#/api/mes/md/unitmeasure';

const emit = defineEmits(['success']);
const sys_yes_no = reactive<DictApi.SelectOption[]>([]);
// const mlistprimary = reactive<DictApi.SelectOption[]>([]);

// 获取字典数据

DictResp(['sys_yes_no', 'listprimary']).then((res) => {
  console.log('字典数据:', res.listprimary);
  console.log('字典数据:', res.sys_yes_no);
  if (res.sys_yes_no) {
    sys_yes_no.push(...res.sys_yes_no);
  }
});

const formdata = ref<unitmeasureAPI.Datum>();
// const title = ref<string>();
// const showConfrimBtn = ref(true);

const [BaseForm, baseFormApi] = useVbenForm({
  showDefaultActions: false,
  // 所有表单项共用，可单独在表单内覆盖
  commonConfig: {
    // 所有表单项
    componentProps: {
      class: 'w-full',
    },
  },
  // 提交函数
  handleSubmit: onSubmit,
  // 垂直布局，label和input在不同行，值为vertical
  // 水平布局，label和input在同一行
  layout: 'horizontal',
  schema: [
    {
      component: 'Input',
      rules: 'required',
      fieldName: 'measureCode',
      formItemClass: 'w-full ml-[-20px]',
      label: '单位编码',
      componentProps: { placeholder: '请输入单位编码' },
    },

    {
      component: 'Input',
      rules: 'required',
      formItemClass: 'w-full ml-[-20px]',
      componentProps: {
        placeholder: '请输入单位名称',
      },
      fieldName: 'measureName',
      label: '单位名称',
    },
    {
      component: 'RadioGroup',
      rules: 'required',
      defaultValue: 'Y',
      componentProps: {
        allowClear: true,
        options: sys_yes_no,
        placeholder: '是否启用',
      },
      fieldName: 'isMainUnit',
      label: '是否是主单位',
    },
    {
      component: 'Select',
      formItemClass: 'w-[380px] ml-[-20px]',
      dependencies: {
        show(values) {
          return values.isMainUnit === 'N';
        },
        triggerFields: ['isMainUnit'],
      },
      componentProps: {
        allowClear: true,
        options: sys_yes_no,
        placeholder: '请选择主单位',
      },
      fieldName: 'primaryUnit',
      label: '主单位',
    },
    {
      component: 'InputNumber',
      dependencies: {
        show(values) {
          return values.isMainUnit === 'N';
        },
        triggerFields: ['isMainUnit'],
      },
      fieldName: 'changeRate',
      formItemClass: 'ml-5 w-[320px]',
      label: '与主单位换算比例',
      componentProps: {
        min: 0,
        defaultValue: 0,
        controls: true,
      },
    },
    {
      component: 'RadioGroup',
      rules: 'required',
      componentProps: {
        allowClear: true,
        options: sys_yes_no,
        placeholder: '是否启用',
      },
      fieldName: 'enableFlag',
      label: '是否启用',
    },
    {
      component: 'Input',
      formItemClass: ' ml-[-20px]',
      componentProps: {
        placeholder: '',
        class: 'h-[80px]',
      },
      fieldName: 'password',
      label: '备注',
    },
  ],
  wrapperClass: 'grid-cols-1',
});

const [Modal, modalApi] = useVbenModal({
  closeOnClickModal: false,
  async onConfirm() {
    const { valid } = await baseFormApi.validate();
    if (valid) {
      modalApi.lock();

      let data;
      await baseFormApi.getValues().then((res) => {
        console.log(res);
        data = res;
      });
      try {
        await (formdata.value?.measureId ? updateUnit(data!) : addUnit(data!));
        modalApi.close();
        emit('success');
      } finally {
        modalApi.lock(false);
      }
    }
  },
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      const data = modalApi.getData();
      if (data) {
        formdata.value = data.row;
        console.log(formdata.value);
        baseFormApi.setValues(formdata.value as any);
      }
    }
  },
});
function onSubmit(values: Record<string, any>) {
  console.log(values);

  modalApi.close();
}
</script>
<template>
  <Modal> <BaseForm /></Modal>
</template>
